import type { LineSeriesOption } from 'echarts/charts'
import { LineChart } from 'echarts/charts'
import type {
  GridComponentOption,
  LegendComponentOption
} from 'echarts/components'
import { GridComponent, LegendComponent } from 'echarts/components'
import type { ComposeOption } from 'echarts/core'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

import { priceSwitchUnit } from '@/utils/compUtils'
import { getStepRound } from '@/utils/echartsUtil'

type DataAnalysisChartOption = ComposeOption<
  LineSeriesOption | GridComponentOption | LegendComponentOption
>

export interface ChartProps {
  dataAnalysisList: any
  maxx: any
  chartHeight?: number
}

echarts.use([LineChart, GridComponent, LegendComponent, CanvasRenderer])

const CommonLineChart = forwardRef<{ resize: () => void }, ChartProps>(
  (props, ref) => {
    const chartDomRef = useRef<HTMLDivElement>(null)
    const dataAnalysisChartRef = useRef<any>(null)

    // 视口改变 echarts  -resize
    useImperativeHandle(ref, () => ({
      resize: () => {
        if (dataAnalysisChartRef.current) {
          dataAnalysisChartRef.current.resize()
        }
      }
    }))

    const { dataAnalysisList, maxx, chartHeight } = props
    useEffect(() => {
      if (!chartDomRef.current) return
      const numberInterval = getStepRound(maxx)
      const seriesList: LineSeriesOption[] = [
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: '#F66E2C'
          },
          symbol: 'none', //折线上对应的data[i]点的标记样式
          data: dataAnalysisList.ydata,
          // areaStyle: {  //cursor:'pointer'是由面积图引起的
          //   color: 'purple'
          // },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(246, 110, 44, 0.30)' // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(246, 110, 44, 0)' //   0% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        {
          type: 'line',
          smooth: true,
          lineStyle: {
            width: 2,
            color: '#3B9DFF'
          },
          symbol: 'none', //折线上对应的data[i]点的标记样式
          data: dataAnalysisList.ydata2,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(59, 157, 255, 0.30)' // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(59, 157, 255, 0)' //   0% 处的颜色
                }
              ],
              global: false // 缺省为 false
            }
          }
        }
      ]
      if (dataAnalysisChartRef.current) {
        dataAnalysisChartRef.current.setOption({
          xAxis: {
            data: dataAnalysisList.xdata
          },
          yAxis: {
            interval: numberInterval == 5 ? 1 : Math.ceil(numberInterval / 5),
            splitNumber: 5,
            max: numberInterval == 5 ? 5 : numberInterval,
            // max: numberInterval,
            // minInterval: Math.ceil(numberInterval / 5),
            axisLabel: {
              margin: 8,
              textStyle: {
                color: '#999',
                fontSize: '12px'
              },
              formatter: function (value: string | number) {
                // if (Number(value) % 1 != 0)
                //   return "" // 如果非整数，返回空，避免0.几的人/车
                // else
                return priceSwitchUnit(value)
              }
            }
          },
          series: seriesList
        })
      } else {
        const dataAnalysisChart = echarts.init(chartDomRef.current, null, {
          renderer: 'canvas',
          locale: 'ZH'
        })

        const dataAnalysisOptions: DataAnalysisChartOption = {
          color: ['#F66E2C'],
          grid: {
            //坐标系
            top: 10,
            left: 50,
            right: 25,
            bottom: 20
          },
          xAxis: {
            type: 'category',
            data: [dataAnalysisList.xdata],
            axisTick: { show: false }, //刻度
            axisLine: {
              //轴线
              lineStyle: {
                color: '#404040'
              }
            },
            axisLabel: {
              fontSize: 12,
              color: '#999999'
            },
            boundaryGap: false
          },
          yAxis: {
            axisLabel: {
              margin: 8,
              formatter: function (value: string | number) {
                // if (Number(value) % 1 != 0)
                //   return "" // 如果非整数，返回空，避免0.几的人/车
                // else
                return priceSwitchUnit(value)
              }
            },
            interval: numberInterval == 5 ? 1 : Math.ceil(numberInterval / 5),
            splitNumber: 5,
            max: numberInterval == 5 ? 5 : numberInterval,
            // minInterval: Math.ceil(numberInterval / 5),
            // max: numberInterval,
            type: 'value',

            // offset: -25,
            splitLine: {
              lineStyle: {
                // dashOffset: 10000,
                type: 'dashed',
                color: '#403E3D'
              }
            }
          },
          series: seriesList
        }
        dataAnalysisChart.setOption(dataAnalysisOptions)

        dataAnalysisChartRef.current = dataAnalysisChart
      }
    }, [maxx, dataAnalysisList])

    useEffect(() => {
      return () => {
        if (dataAnalysisChartRef.current) {
          dataAnalysisChartRef.current.dispose() //销毁实例
          dataAnalysisChartRef.current = null
        }
      }
    }, [])

    return (
      <div
        style={{ width: 928, height: chartHeight || '123px' }}
        ref={chartDomRef}
      ></div>
    )
  }
)

export default CommonLineChart
